<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>工作宝典 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/35.28502be1.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/10.8b750e5f.js"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/12.3ea117b6.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/17.79d3becb.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/3.0076a912.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/36.3622a14c.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/4.586af112.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/6.1b7d5a6d.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" class="sidebar-link">Node 第 1 天</a></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" class="sidebar-link">Node 第 3 天</a></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="工作宝典"><a href="#工作宝典" class="header-anchor">#</a> 工作宝典</h1> <p>[TOC]</p> <h2 id="面试题篇"><a href="#面试题篇" class="header-anchor">#</a> 面试题篇</h2> <h3 id="vue"><a href="#vue" class="header-anchor">#</a> Vue</h3> <h5 id="_1-单页面应用的优缺点"><a href="#_1-单页面应用的优缺点" class="header-anchor">#</a> 1.单页面应用的优缺点？</h5> <ul><li><p>优点</p> <ul><li>1.用户体验好，不需要重新加载整个页面，避免了不必要的跳转和重复渲染</li> <li>2.SPA对于服务器的压力较小</li> <li>3.前后端分离，结构比较清晰</li></ul></li> <li><p>缺点</p> <ul><li>1.初次加载需要的时间比较多</li> <li>2.前进后退按钮功能失效</li> <li>3.不利于SEO搜索，所有的内容都在一个页面中动态替换显示</li></ul></li></ul> <h5 id="_2-v-if和v-show的区别"><a href="#_2-v-if和v-show的区别" class="header-anchor">#</a> 2.v-if和v-show的区别</h5> <ul><li>v-if是条件渲染，适用于很少改变条件，不需要频繁切换的场景</li> <li>v-show不管初始条件是什么，元素总是会被渲染的，只是根据display属性进行切换</li></ul> <h5 id="_3-computed和watch的区别以及运用的场景"><a href="#_3-computed和watch的区别以及运用的场景" class="header-anchor">#</a> 3.computed和watch的区别以及运用的场景？</h5> <ul><li><p>computed是计算属性，依赖其他属性值，并且有缓存，只有它依赖的属性值改变了，它才会重新计算</p> <ul><li>我们为了避免每次获取值都需要重新计算的时候可以使用</li></ul></li> <li><p>watch更多的是观察的作用，类似于监听回调，监听的数据变化时都会执行回调进行后续操作</p> <ul><li>如果我们需要变化是执行异步或者开销比较大的时候可以使用</li></ul></li></ul> <h5 id="_4-说说你对vue生命周期的理解"><a href="#_4-说说你对vue生命周期的理解" class="header-anchor">#</a> 4.说说你对Vue生命周期的理解？</h5> <ul><li>Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -&gt; 渲染、更新 -&gt; 渲染、卸载等一系列过程</li></ul> <h5 id="_5-在哪个生命周期内调用异步请求"><a href="#_5-在哪个生命周期内调用异步请求" class="header-anchor">#</a> 5.在哪个生命周期内调用异步请求？</h5> <ul><li>可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值</li></ul> <h5 id="_6-说说你对keep-alive的了解"><a href="#_6-说说你对keep-alive的了解" class="header-anchor">#</a> 6.说说你对keep-alive的了解？</h5> <ul><li>keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，一般结合路由和动态组件一起使用，用于缓存组件</li></ul> <h5 id="_7-v-model的原理"><a href="#_7-v-model的原理" class="header-anchor">#</a> 7.v-model的原理？</h5> <ul><li><p>我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件</p> <ul><li>text 和 textarea 元素使用 value 属性和 input 事件；</li> <li>checkbox 和 radio 使用 checked 属性和 change 事件；</li> <li>select 字段将 value 作为 prop 并将 change 作为事件。</li></ul></li></ul> <h5 id="_8-vue-router路由模式有几种"><a href="#_8-vue-router路由模式有几种" class="header-anchor">#</a> 8.vue-router路由模式有几种？</h5> <ul><li><p>vue-router 有 3 种路由模式：hash、history、abstract</p> <ul><li>hash:  使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；</li> <li>history :  依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；</li> <li>abstract :  支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.</li></ul></li></ul> <h5 id="_9-你对vue项目进行过哪些优化"><a href="#_9-你对vue项目进行过哪些优化" class="header-anchor">#</a> 9.你对Vue项目进行过哪些优化？</h5> <ul><li><p>（1）代码层面的优化</p> <ul><li>computed 和 watch  区分使用场景</li> <li>v-for 遍历必须为 item 添加 key，且避免同时使用 v-if</li> <li>长列表性能优化</li> <li>事件的销毁</li> <li>图片资源懒加载</li> <li>路由懒加载</li> <li>第三方插件的按需引入</li> <li>优化无限列表性能</li> <li>服务端渲染 SSR or 预渲染</li> <li>v-if 和 v-show 区分使用场景</li></ul></li> <li><p>（2）Webpack 层面的优化</p> <ul><li>Webpack 对图片进行压缩</li> <li>减少 ES6 转为 ES5 的冗余代码</li> <li>提取公共代码</li> <li>模板预编译</li> <li>提取组件的 CSS</li> <li>优化 SourceMap</li> <li>构建结果输出分析</li> <li>Vue 项目的编译优化</li></ul></li> <li><p>（3）基础的 Web 技术的优化</p> <ul><li>开启 gzip 压缩</li> <li>浏览器缓存</li> <li>CDN 的使用</li> <li>使用 Chrome Performance 查找性能瓶颈</li></ul></li></ul> <h5 id="_10-vuex是什么-怎么使用-哪种功能场景使用它"><a href="#_10-vuex是什么-怎么使用-哪种功能场景使用它" class="header-anchor">#</a> 10.Vuex是什么？怎么使用？哪种功能场景使用它？</h5> <ul><li>vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车</li></ul> <h5 id="_11-vue的双向数据绑定原理是什么"><a href="#_11-vue的双向数据绑定原理是什么" class="header-anchor">#</a> 11.Vue的双向数据绑定原理是什么？</h5> <ul><li>ue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。</li></ul> <h5 id="_12-说说你对vue生命周期的理解"><a href="#_12-说说你对vue生命周期的理解" class="header-anchor">#</a> 12.说说你对Vue生命周期的理解？</h5> <ul><li>创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。</li> <li>载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。</li> <li>更新前/后：当data变化时，会触发beforeUpdate和updated方法。</li> <li>销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在</li></ul> <h5 id="_13-vue-loader是什么-它的作用有哪些"><a href="#_13-vue-loader是什么-它的作用有哪些" class="header-anchor">#</a> 13.vue-loader是什么？它的作用有哪些？</h5> <ul><li>解析.vue文件的一个加载器，跟template/js/style转换成js模块。</li> <li>用途：js可以写es6、style样式可以scss或less、template可以加jade等</li></ul> <h5 id="_14-第一次页面加载会触发哪几个钩子"><a href="#_14-第一次页面加载会触发哪几个钩子" class="header-anchor">#</a> 14.第一次页面加载会触发哪几个钩子？</h5> <ul><li>第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子</li></ul> <h5 id="_15-vue中的key到底有什么用"><a href="#_15-vue中的key到底有什么用" class="header-anchor">#</a> 15.Vue中的key到底有什么用？</h5> <ul><li>key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速</li></ul> <h5 id="_16-vue-router有哪几种导航"><a href="#_16-vue-router有哪几种导航" class="header-anchor">#</a> 16.vue-router有哪几种导航？</h5> <ul><li><p>全局守卫</p> <ul><li>router.beforeEach 全局前置守卫 进入路由之前</li> <li>router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用</li> <li>router.afterEach 全局后置钩子 进入路由之后</li></ul></li> <li><p>路由独享守卫</p></li> <li><p>路由组件内的守卫</p> <ul><li>beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例 this，组件实例还没被创建</li> <li>beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 this</li> <li>beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this</li></ul></li></ul> <h5 id="_17-父组件给子组件传值"><a href="#_17-父组件给子组件传值" class="header-anchor">#</a> 17.父组件给子组件传值</h5> <ul><li>使用props，父组件可以使用props向子组件传递数据。</li></ul> <h5 id="_18-子组件向父组件传值"><a href="#_18-子组件向父组件传值" class="header-anchor">#</a> 18.子组件向父组件传值</h5> <ul><li>父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。</li></ul> <h5 id="_19-兄弟组件之间的通信"><a href="#_19-兄弟组件之间的通信" class="header-anchor">#</a> 19.兄弟组件之间的通信</h5> <ul><li>可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。</li></ul> <h5 id="_20-子组件为什么不能修改父组件传递的prop"><a href="#_20-子组件为什么不能修改父组件传递的prop" class="header-anchor">#</a> 20.子组件为什么不能修改父组件传递的Prop？</h5> <ul><li>Vue提倡单向数据流,即父级 props 的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解。如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。</li></ul> <h3 id="微信小程序"><a href="#微信小程序" class="header-anchor">#</a> 微信小程序</h3> <h5 id="_1-微信小程序的双向绑定和vue的异同"><a href="#_1-微信小程序的双向绑定和vue的异同" class="header-anchor">#</a> 1.微信小程序的双向绑定和vue的异同</h5> <ul><li>大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！</li></ul> <h5 id="_2-wxml与标准的html有什么区别"><a href="#_2-wxml与标准的html有什么区别" class="header-anchor">#</a> 2.wxml与标准的html有什么区别？</h5> <ul><li>wxml基于xml设计，标签只能在微信小程序中使用，不能使用html的标签</li></ul> <h5 id="_3-父组件如何向子组件传值"><a href="#_3-父组件如何向子组件传值" class="header-anchor">#</a> 3.父组件如何向子组件传值</h5> <ul><li>父组件通过viewText=&quot;&quot;传向子组件。</li> <li>子组件通过properties来获取</li></ul> <h5 id="_4-子组件如何向父组件传值"><a href="#_4-子组件如何向父组件传值" class="header-anchor">#</a> 4.子组件如何向父组件传值</h5> <h5 id="_5-请你谈谈小程序的主要目录和文件的作用"><a href="#_5-请你谈谈小程序的主要目录和文件的作用" class="header-anchor">#</a> 5.请你谈谈小程序的主要目录和文件的作用？</h5> <ul><li>project.config.json  项目配置文件</li> <li>App.js配置一些全局的基础数据</li> <li>App.json 小程序底部tab栏，标题栏的文字，颜色，大小，路由，等的设置</li> <li>App.wxss 全局的公共样式</li> <li>Pages配置每个页面</li> <li>index.json、index.wxml、index.wxss、index.js、</li></ul> <h5 id="_6-小程序页面之间传递参数的方法"><a href="#_6-小程序页面之间传递参数的方法" class="header-anchor">#</a> 6.小程序页面之间传递参数的方法？</h5> <ul><li>1，使用全局变量</li> <li>2，页面跳转或者重定向使用url传参数</li> <li>3，使用小程序自带的存储传参数</li></ul> <h5 id="_7-小程序中wxss和css有什么区别"><a href="#_7-小程序中wxss和css有什么区别" class="header-anchor">#</a> 7.小程序中wxss和css有什么区别？</h5> <ul><li>wxss的图片引入需使用外链地址</li> <li>没有 Body；样式可直接使用 import 导入</li></ul> <h5 id="_8-说说微信小程序的原理"><a href="#_8-说说微信小程序的原理" class="header-anchor">#</a> 8.说说微信小程序的原理？</h5> <ul><li>微信小程序采用  JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口</li> <li>微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现</li> <li>小程序分为两个部分 webview和 appService 。其中 webview 主要用来展现UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理</li></ul> <h5 id="_9-微信小程序的生命周期"><a href="#_9-微信小程序的生命周期" class="header-anchor">#</a> 9.微信小程序的生命周期？</h5> <ul><li>onLoad 页面加载时触发。一个页面只会调用一次，可以在onLoad 的参数中获取打开当前页面路径中的参数</li> <li>onShow() 页面显示/切入前台时触发</li> <li>onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互</li> <li>onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等</li> <li>onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时</li></ul> <h5 id="_10-哪些方法可以用来提高微信小程序的应用速度"><a href="#_10-哪些方法可以用来提高微信小程序的应用速度" class="header-anchor">#</a> 10.哪些方法可以用来提高微信小程序的应用速度？</h5> <ul><li>1.提高页面加载速度</li> <li>2.用户行为预测</li> <li>3.减少默认data的大小</li> <li>4.组件化方案</li></ul> <h5 id="_11-小程序的优缺点"><a href="#_11-小程序的优缺点" class="header-anchor">#</a> 11.小程序的优缺点？</h5> <ul><li>优势：即用即走，不用安装，省流量，省安装时间，不占用桌面 依托微信流量，天生推广传播优势 开发成本比 App 低</li> <li>缺点：用户留存，即用即走是优势，也存在一些问题 入口相对传统 App 要深很多 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面</li></ul> <h5 id="_12-怎么解决小程序的异步请求问题"><a href="#_12-怎么解决小程序的异步请求问题" class="header-anchor">#</a> 12.怎么解决小程序的异步请求问题？</h5> <ul><li>小程序支持大部分es6语法</li> <li>在返回成功的回调里面处理逻辑Promise异步</li></ul> <h5 id="_13-如何实现下拉刷新"><a href="#_13-如何实现下拉刷新" class="header-anchor">#</a> 13.如何实现下拉刷新？</h5> <ul><li>首先在全局 config 中的 window配置 enablePullDownRefresh</li> <li>，在 Page 中定义onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法</li> <li>请求返回后，调用wx.stopPullDownRefresh停止下拉刷新</li></ul> <h5 id="_14-bindtap和catchtap的区别是什么"><a href="#_14-bindtap和catchtap的区别是什么" class="header-anchor">#</a> 14.bindtap和catchtap的区别是什么？</h5> <ul><li>相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分</li> <li>不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的</li></ul> <h5 id="_15-小程序对wx-if-和-hidden使用的理解"><a href="#_15-小程序对wx-if-和-hidden使用的理解" class="header-anchor">#</a> 15.小程序对wx:if 和 hidden使用的理解？</h5> <ul><li>wx:if有更高的切换消耗。</li> <li>hidden 有更高的初始渲染消耗。</li> <li>因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则wx:if 较好。</li></ul> <h5 id="_16-微信小城和h5的区别"><a href="#_16-微信小城和h5的区别" class="header-anchor">#</a> 16.微信小城和H5的区别？</h5> <ul><li>运行环境的不同</li> <li>传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。</li> <li>开发成本的不同</li> <li>只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG</li> <li>获取系统级权限的不同</li></ul> <h5 id="_17-小程序onpagescroll方法的使用注意什么"><a href="#_17-小程序onpagescroll方法的使用注意什么" class="header-anchor">#</a> 17.小程序onPageScroll方法的使用注意什么？</h5> <ul><li>由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。</li></ul> <h5 id="_18-小程序视图渲染结束回调"><a href="#_18-小程序视图渲染结束回调" class="header-anchor">#</a> 18.小程序视图渲染结束回调？</h5> <ul><li>使用setData(data, callback)，在callback回调方法中添加后续操作代码</li></ul> <h5 id="_19-如何封装微信小程序的数据请求的"><a href="#_19-如何封装微信小程序的数据请求的" class="header-anchor">#</a> 19.如何封装微信小程序的数据请求的？</h5> <ul><li>1、将所有的接口放在统一的js文件中并导出。</li> <li>2、在app.js中创建封装请求数据的方法。</li> <li>3、在子页面中调用封装的方法请求数据。</li></ul> <h5 id="_20-webview中的页面怎么跳回小程序中"><a href="#_20-webview中的页面怎么跳回小程序中" class="header-anchor">#</a> 20.webview中的页面怎么跳回小程序中？</h5> <ul><li>首先要引入最新版的jweixin-x.x.x.js，然后</li> <li>wx.miniProgram.navigateTo({</li> <li>url: '/pages/login/login'+'$params'</li> <li>})</li></ul> <h5 id="_21-小程序关联微信公众号如何确定用户的唯一性"><a href="#_21-小程序关联微信公众号如何确定用户的唯一性" class="header-anchor">#</a> 21.小程序关联微信公众号如何确定用户的唯一性？</h5> <ul><li>使用wx.getUserInfo方法withCredentials为 true时 可获取encryptedData，里面有union_id。后端需要进行对称解密。</li></ul> <h5 id="_22-小程序调用后台接口遇到哪些问题"><a href="#_22-小程序调用后台接口遇到哪些问题" class="header-anchor">#</a> 22.小程序调用后台接口遇到哪些问题？</h5> <ul><li>1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；</li> <li>2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。</li></ul> <h5 id="_23-webview的页面怎么跳转到小程序导航的页面"><a href="#_23-webview的页面怎么跳转到小程序导航的页面" class="header-anchor">#</a> 23.webview的页面怎么跳转到小程序导航的页面？</h5> <ul><li>小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入代码</li></ul> <h3 id="react"><a href="#react" class="header-anchor">#</a> React</h3> <h5 id="_1-react中refs的作用"><a href="#_1-react中refs的作用" class="header-anchor">#</a> 1.React中refs的作用？</h5> <ul><li>Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。</li></ul> <h5 id="_2-react中如何处理事件"><a href="#_2-react中如何处理事件" class="header-anchor">#</a> 2.React中如何处理事件？</h5> <ul><li>为了解决跨浏览器的兼容性问题，SyntheticEvent实例将被船体给你的事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。</li></ul> <h5 id="_3-state和props区别是什么"><a href="#_3-state和props区别是什么" class="header-anchor">#</a> 3.State和props区别是什么？</h5> <ul><li>props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即</li></ul> <p>state 是组件自己管理数据，控制自己的状态，可变；
props 是外部传入的数据参数，不可变；
没有state的叫做无状态组件，有state的叫做有状态组件；
多用 props，少用 state，也就是多写无状态组件。</p> <h5 id="_4-在构造函数调用super并将props作为参数传入的作用是什么"><a href="#_4-在构造函数调用super并将props作为参数传入的作用是什么" class="header-anchor">#</a> 4.在构造函数调用super并将props作为参数传入的作用是什么？</h5> <ul><li>在调用super（）方法之前，子类构造函数无法使用this引用，ES6子类也是如此。将pros参数传递给super（）调用的主要原因是在子构造函数中能够通过this.props来获取取传入的props</li></ul> <h5 id="_5-什么是控制组件"><a href="#_5-什么是控制组件" class="header-anchor">#</a> 5.什么是控制组件？</h5> <ul><li>在HTML中，表单元素如input，textarea，select通常维护自己的状态，并根据用户输入进行更新，当用户提交表单时，这些元素随着表单一起发送</li> <li>React的工作方式不同，包含表单的组件将跟踪其状态中的输入值，并在每次回调函数触发时重新渲染组件，因为状态被更新。这种方式由React控制其值的输入表单元素叫受控组件</li></ul> <h5 id="_6-讲讲什么是jsx"><a href="#_6-讲讲什么是jsx" class="header-anchor">#</a> 6.讲讲什么是JSX？</h5> <ul><li>JSX代码本身不能被浏览器读取，必须使用Babel和Webpack等工具将它转换为传统的JS</li></ul> <h5 id="_7-为什么不直接更新state"><a href="#_7-为什么不直接更新state" class="header-anchor">#</a> 7.为什么不直接更新state？</h5> <ul><li>如果试图直接更新state，则不会重新渲染组件</li> <li>需要使用setState（）方法来更新state，它调度对组件state对象的更新，当state改变时，组件通过重新渲染来响应</li></ul> <h5 id="_8-react组件生命周期有哪些不同阶段"><a href="#_8-react组件生命周期有哪些不同阶段" class="header-anchor">#</a> 8.React组件生命周期有哪些不同阶段？</h5> <ul><li>Initialization：在这个阶段，组件准备设置初始化状态和默认属性。</li> <li>Mounting：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。</li> <li>Updating：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。</li> <li>Unmounting：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount 生命周期方法。</li></ul> <h5 id="_9-react的生命周期有哪些"><a href="#_9-react的生命周期有哪些" class="header-anchor">#</a> 9.React的生命周期有哪些？</h5> <ul><li>componentWillMount:在渲染之前执行，用于根组件中的 App 级配置。</li> <li>componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。</li> <li>componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染</li> <li>shouldComponentUpdate：确定是否更新组件。默认情况下，它返回true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。</li> <li>componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。</li> <li>componentDidUpdate：它主要用于更新DOM以响应props或state更改。</li> <li>componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。</li></ul> <h5 id="_10-react中的usestate-是什么"><a href="#_10-react中的usestate-是什么" class="header-anchor">#</a> 10.React中的useState（）是什么？</h5> <ul><li>useState 是一个内置的 React Hook。useState(0) 返回一个元组，其中第一个参数count是计数器的当前状态，setCounter 提供更新计数器状态的方法。</li> <li>咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下，咱们在setCount函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件。</li></ul> <h5 id="_11-react中的strictmode-严格模式-是什么"><a href="#_11-react中的strictmode-严格模式-是什么" class="header-anchor">#</a> 11.React中的StrictMode（严格模式）是什么？</h5> <ul><li>React 的StrictMode是一种辅助组件，可以帮助咱们编写更好的 react 组件，可以使用<StrictMode></StrictMode>包装一组组件，并且可以帮咱们以下检查：</li> <li>验证内部组件是否遵循某些推荐做法，如果没有，会在控制台给出警告。</li> <li>验证是否使用的已经废弃的方法，如果有，会在控制台给出警告。</li> <li>通过识别潜在的风险预防一些副作用。</li></ul> <h5 id="_12-当调用setstate时-react-render-是如何工作的"><a href="#_12-当调用setstate时-react-render-是如何工作的" class="header-anchor">#</a> 12.当调用setState时，React render 是如何工作的？</h5> <ul><li>1.虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，所以默认情况下 React 是没有优化的。</li> <li>2.原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。</li></ul> <h5 id="_13-为什么虚拟dom会提高性能"><a href="#_13-为什么虚拟dom会提高性能" class="header-anchor">#</a> 13.为什么虚拟dom会提高性能？</h5> <ul><li>虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。</li> <li>用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。</li></ul> <h5 id="_14-react中有哪三种构建组件的方式"><a href="#_14-react中有哪三种构建组件的方式" class="header-anchor">#</a> 14.React中有哪三种构建组件的方式？</h5> <ul><li>React.createClass()、ES6 class 和无状态函数。</li></ul> <h5 id="_15-redux中间件"><a href="#_15-redux中间件" class="header-anchor">#</a> 15.redux中间件</h5> <ul><li>中间件提供第三方插件的模式，自定义拦截 action -&gt; reducer 的过程。变为 action -&gt; middlewares -&gt; reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。</li> <li>redux-logger：提供日志输出</li> <li>redux-thunk：处理异步操作</li> <li>redux-promise：处理异步操作，actionCreator的返回值是promise</li></ul> <h5 id="_16-redux有什么缺点"><a href="#_16-redux有什么缺点" class="header-anchor">#</a> 16.redux有什么缺点？</h5> <ul><li>1.一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取</li> <li>2.当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。</li></ul> <h5 id="_17-react性能优化是在哪个周期函数"><a href="#_17-react性能优化是在哪个周期函数" class="header-anchor">#</a> 17.react性能优化是在哪个周期函数？</h5> <ul><li>shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能。</li></ul> <h5 id="_18-react性能优化方案"><a href="#_18-react性能优化方案" class="header-anchor">#</a> 18.react性能优化方案？</h5> <ul><li>（1）重写shouldComponentUpdate来避免不必要的dom操作。</li> <li>（2）使用 production 版本的react.js。</li> <li>（3）使用key来帮助React识别列表中所有子组件的最小变化。</li></ul> <h5 id="_19-react中keys的作用是什么"><a href="#_19-react中keys的作用是什么" class="header-anchor">#</a> 19.React中keys的作用是什么？</h5> <ul><li>Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。</li></ul> <h5 id="_20-简述flux思想"><a href="#_20-简述flux思想" class="header-anchor">#</a> 20.简述flux思想？</h5> <ul><li>Flux 的最大特点，就是数据的&quot;单向流动&quot;。</li> <li>1.用户访问 View</li> <li>2.View 发出用户的 Action</li> <li>3.Dispatcher 收到 Action，要求 Store 进行相应的更新</li> <li>4.Store 更新后，发出一个&quot;change&quot;事件</li> <li>5.View 收到&quot;change&quot;事件后，更新页面</li></ul> <h3 id="web综合题目"><a href="#web综合题目" class="header-anchor">#</a> Web综合题目</h3> <h5 id="_1、前端需要注意哪些seo"><a href="#_1、前端需要注意哪些seo" class="header-anchor">#</a> 1、前端需要注意哪些SEO</h5> <ul><li>合理的<code>title</code>、<code>description</code>、<code>keywords</code>：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面<code>title</code>要有所不同；<code>description</code>把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面<code>description</code>有所不同；<code>keywords</code>列举出重要关键词即可</li> <li>语义化的<code>HTML</code>代码，符合W3C规范：语义化代码让搜索引擎容易理解网页</li> <li>重要内容<code>HTML</code>代码放在最前：搜索引擎抓取<code>HTML</code>顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取</li> <li>重要内容不要用<code>js</code>输出：爬虫不会执行js获取内容</li> <li>少用<code>iframe</code>：搜索引擎不会抓取<code>iframe</code>中的内容</li> <li>非装饰性图片必须加<code>alt</code></li> <li>提高网站速度：网站速度是搜索引擎排序的一个重要指标</li></ul> <h5 id="_2、http的几种请求方法用途"><a href="#_2、http的几种请求方法用途" class="header-anchor">#</a> 2、HTTP的几种请求方法用途</h5> <ul><li>1、<code>GET</code>方法
<ul><li>发送一个请求来取得服务器上的某一资源</li></ul></li> <li>2、<code>POST</code>方法
<ul><li>向<code>URL</code>指定的资源提交数据或附加新的数据</li></ul></li> <li>3、<code>PUT</code>方法
<ul><li>跟<code>POST</code>方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而<code>POST</code>没有</li></ul></li> <li>4、<code>HEAD</code>方法
<ul><li>只请求页面的首部</li></ul></li> <li>5、<code>DELETE</code>方法
<ul><li>删除服务器上的某资源</li></ul></li> <li>6、<code>OPTIONS</code>方法
<ul><li>它用于获取当前<code>URL</code>所支持的方法。如果请求成功，会有一个<code>Allow</code>的头包含类似<code>“GET,POST”</code>这样的信息</li></ul></li> <li>7、<code>TRACE</code>方法
<ul><li><code>TRACE</code>方法被用于激发一个远程的，应用层的请求消息回路</li></ul></li> <li>8、<code>CONNECT</code>方法
<ul><li>把请求连接转换到透明的<code>TCP/IP</code>通道</li></ul></li></ul> <h5 id="_3、从浏览器地址栏输入url到显示页面的步骤"><a href="#_3、从浏览器地址栏输入url到显示页面的步骤" class="header-anchor">#</a> 3、从浏览器地址栏输入url到显示页面的步骤</h5> <ul><li>浏览器根据请求的<code>URL</code>交给<code>DNS</code>域名解析，找到真实<code>IP</code>，向服务器发起请求；</li> <li>服务器交给后台处理完成后返回数据，浏览器接收文件（<code>HTML、JS、CSS</code>、图象等）；</li> <li>浏览器对加载到的资源（<code>HTML、JS、CSS</code>等）进行语法解析，建立相应的内部数据结构（如<code>HTML</code>的<code>DOM</code>）；</li> <li>载入解析到的资源文件，渲染页面，完成。</li></ul> <h5 id="_4、如何进行网站性能优化"><a href="#_4、如何进行网站性能优化" class="header-anchor">#</a> 4、如何进行网站性能优化</h5> <ul><li><code>content</code>方面
<ol><li>减少<code>HTTP</code>请求：合并文件、<code>CSS</code>精灵、<code>inline Image</code></li> <li>减少<code>DNS</code>查询：<code>DNS</code>缓存、将资源分布到恰当数量的主机名</li> <li>减少<code>DOM</code>元素数量</li></ol></li> <li><code>Server</code>方面
<ol><li>使用<code>CDN</code></li> <li>配置<code>ETag</code></li> <li>对组件使用<code>Gzip</code>压缩</li></ol></li> <li><code>Cookie</code>方面
<ol><li>减小<code>cookie</code>大小</li></ol></li> <li><code>css</code>方面
<ol><li>将样式表放到页面顶部</li> <li>不使用<code>CSS</code>表达式</li> <li>使用``不使用<code>@import</code></li></ol></li> <li><code>Javascript</code>方面
<ol><li>将脚本放到页面底部</li> <li>将<code>javascript</code>和<code>css</code>从外部引入</li> <li>压缩<code>javascript</code>和<code>css</code></li> <li>删除不需要的脚本</li> <li>减少<code>DOM</code>访问</li></ol></li> <li>图片方面
<ol><li>优化图片：根据实际颜色需要选择色深、压缩</li> <li>优化<code>css</code>精灵</li> <li>不要在<code>HTML</code>中拉伸图片</li></ol></li></ul> <h5 id="_5、http状态码及其含义"><a href="#_5、http状态码及其含义" class="header-anchor">#</a> 5、HTTP状态码及其含义</h5> <ul><li><div class="language- extra-class"><pre class="language-text"><code>1XX
</code></pre></div><p>：信息状态码</p> <ul><li><code>100 Continue</code> 继续，一般在发送<code>post</code>请求时，已发送了<code>http header</code>之后服务端将返回此信息，表示确认，之后发送具体参数信息</li></ul></li> <li><div class="language- extra-class"><pre class="language-text"><code>2XX
</code></pre></div><p>：成功状态码</p> <ul><li><code>200 OK</code> 正常返回信息</li> <li><code>201 Created</code> 请求成功并且服务器创建了新的资源</li> <li><code>202 Accepted</code> 服务器已接受请求，但尚未处理</li></ul></li> <li><div class="language- extra-class"><pre class="language-text"><code>3XX
</code></pre></div><p>：重定向</p> <ul><li><code>301 Moved Permanently</code> 请求的网页已永久移动到新位置。</li> <li><code>302 Found</code> 临时性重定向。</li> <li><code>303 See Other</code> 临时性重定向，且总是使用 <code>GET</code> 请求新的 <code>URI</code>。</li> <li><code>304 Not Modified</code> 自从上次请求后，请求的网页未修改过。</li></ul></li> <li><div class="language- extra-class"><pre class="language-text"><code>4XX
</code></pre></div><p>：客户端错误</p> <ul><li><code>400 Bad Request</code> 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。</li> <li><code>401 Unauthorized</code> 请求未授权。</li> <li><code>403 Forbidden</code> 禁止访问。</li> <li><code>404 Not Found</code> 找不到如何与 <code>URI</code> 相匹配的资源。</li></ul></li> <li><div class="language- extra-class"><pre class="language-text"><code>5XX:
</code></pre></div><p>服务器错误</p> <ul><li><code>500 Internal Server Error</code> 最常见的服务器端错误。</li> <li><code>503 Service Unavailable</code> 服务器端暂时无法处理请求（可能是过载或维护）。</li></ul></li></ul> <h5 id="_6、html5有哪些新特性"><a href="#_6、html5有哪些新特性" class="header-anchor">#</a> 6、html5有哪些新特性？</h5> <ul><li><code>HTML5</code> 现在已经不是 <code>SGML</code> 的子集，主要是关于图像，位置，存储，多任务等功能的增加
<ul><li>绘画 <code>canvas</code></li> <li>用于媒介回放的 <code>video</code> 和 <code>audio</code> 元素</li> <li>本地离线存储 <code>localStorage</code> 长期存储数据，浏览器关闭后数据不丢失</li> <li><code>sessionStorage</code> 的数据在浏览器关闭后自动删除</li> <li>语意化更好的内容元素，比如<code>article</code>、<code>footer</code>、<code>header</code>、<code>nav</code>、<code>section</code></li> <li>表单控件，<code>calendar</code>、<code>date</code>、<code>time</code>、<code>email</code>、<code>url</code>、<code>search</code></li> <li>新的技术<code>webworker</code>, <code>websocket</code>, <code>Geolocation</code></li></ul></li></ul> <h5 id="_7、html5的离线储存怎么使用-工作原理能不能解释一下"><a href="#_7、html5的离线储存怎么使用-工作原理能不能解释一下" class="header-anchor">#</a> 7、<code>HTML5</code>的离线储存怎么使用，工作原理能不能解释一下？</h5> <ul><li>在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件</li> <li>原理：<code>HTML5</code>的离线存储是基于一个新建的<code>.appcache</code>文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像<code>cookie</code>一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示</li> <li>如何使用：
<ul><li>页面头部像下面一样加入一个<code>manifest</code>的属性；</li> <li>在<code>cache.manifest</code>文件的编写离线存储的资源</li> <li>在离线状态时，操作<code>window.applicationCache</code>进行需求实现</li></ul></li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code>CACHE MANIFEST
<span class="token comment">#v0.11</span>
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
</code></pre></div><h5 id="_8、浏览器是怎么对html5的离线储存资源进行管理和加载的呢"><a href="#_8、浏览器是怎么对html5的离线储存资源进行管理和加载的呢" class="header-anchor">#</a> 8、浏览器是怎么对<code>HTML5</code>的离线储存资源进行管理和加载的呢</h5> <ul><li>在线的情况下，浏览器发现<code>html</code>头部有<code>manifest</code>属性，它会请求<code>manifest</code>文件，如果是第一次访问<code>app</code>，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过<code>app</code>并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的<code>manifest</code>文件与旧的<code>manifes</code>t文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。</li> <li>离线的情况下，浏览器就直接使用离线存储的资源。</li></ul> <h5 id="_9、请描述一下-cookies-sessionstorage-和-localstorage-的区别"><a href="#_9、请描述一下-cookies-sessionstorage-和-localstorage-的区别" class="header-anchor">#</a> 9、请描述一下 <code>cookies</code>，<code>sessionStorage</code> 和 <code>localStorage</code> 的区别？</h5> <ul><li><code>cookie</code>是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）</li> <li>cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递</li> <li><code>sessionStorage</code>和<code>localStorage</code>不会自动把数据发给服务器，仅在本地保存</li> <li>存储大小：
<ul><li><code>cookie</code>数据大小不能超过4k</li> <li><code>sessionStorage</code>和<code>localStorage</code>虽然也有存储大小的限制，但比<code>cookie</code>大得多，可以达到5M或更大</li></ul></li> <li>有期时间：
<ul><li><code>localStorage</code> 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据</li> <li><code>sessionStorage</code> 数据在当前浏览器窗口关闭后自动删除</li> <li><code>cookie</code> 设置的<code>cookie</code>过期时间之前一直有效，即使窗口或浏览器关闭</li></ul></li></ul> <h5 id="_9、iframe有那些缺点"><a href="#_9、iframe有那些缺点" class="header-anchor">#</a> 9、iframe有那些缺点？</h5> <ul><li><code>iframe</code>会阻塞主页面的<code>Onload</code>事件</li> <li>搜索引擎的检索程序无法解读这种页面，不利于<code>SEO</code></li> <li><code>iframe</code>和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载</li> <li>使用<code>iframe</code>之前需要考虑这两个缺点。如果需要使用<code>iframe</code>，最好是通过<code>javascript</code>动态给<code>iframe</code>添加<code>src</code>属性值，这样可以绕开以上两个问题</li></ul> <h5 id="_10、doctype作用-严格模式与混杂模式如何区分-它们有何意义"><a href="#_10、doctype作用-严格模式与混杂模式如何区分-它们有何意义" class="header-anchor">#</a> 10、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?</h5> <ul><li>页面被加载的时，<code>link</code>会同时被加载，而<code>@imort</code>页面被加载的时，<code>link</code>会同时被加载，而<code>@import</code>引用的<code>CSS</code>会等到页面被加载完再加载
<code>import</code>只在<code>IE5</code>以上才能识别，而<code>link</code>是<code>XHTML</code>标签，无兼容问题
<code>link</code>方式的样式的权重 高于<code>@import</code>的权重</li> <li><code>声明位于文档中的最前面，处于</code> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档</li> <li>严格模式的排版和 <code>JS</code> 运作模式是 以该浏览器支持的最高标准运行</li> <li>在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 <code>DOCTYPE</code>不存在或格式不正确会导致文档以混杂模式呈现</li></ul> <h5 id="_11、display-none-与visibility-hidden-的区别"><a href="#_11、display-none-与visibility-hidden-的区别" class="header-anchor">#</a> 11、<code>display: none;</code>与<code>visibility: hidden;</code>的区别</h5> <ul><li>联系：它们都能让元素不可见</li> <li>区别：
<ul><li><code>display:none</code>;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；<code>visibility: hidden</code>;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见</li> <li><code>display: none</code>;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示<code>；visibility: hidden;</code>是继承属性，子孙节点消失由于继承了<code>hidden</code>，通过设置<code>visibility: visible;</code>可以让子孙节点显式</li> <li>修改常规流中元素的<code>display</code>通常会造成文档重排。修改<code>visibility</code>属性只会造成本元素的重绘。</li> <li>读屏器不会读取<code>display: none</code>;元素内容；会读取<code>visibility: hidden;</code>元素内容</li></ul></li></ul> <h5 id="_12、如何创建块级格式化上下文-block-formatting-context-bfc有什么用"><a href="#_12、如何创建块级格式化上下文-block-formatting-context-bfc有什么用" class="header-anchor">#</a> 12、如何创建块级格式化上下文(block formatting context),BFC有什么用</h5> <ul><li>创建规则：
<ul><li>根元素</li> <li>浮动元素（<code>float</code>不是<code>none</code>）</li> <li>绝对定位元素（<code>position</code>取值为<code>absolute</code>或<code>fixed</code>）</li> <li><code>display</code>取值为<code>inline-block</code>,<code>table-cell</code>, <code>table-caption</code>,<code>flex</code>, <code>inline-flex</code>之一的元素</li> <li><code>overflow</code>不是<code>visible</code>的元素</li></ul></li> <li>作用：
<ul><li>可以包含浮动元素</li> <li>不被浮动元素覆盖</li> <li>阻止父子元素的<code>margin</code>折叠</li></ul></li></ul> <h5 id="_13、display-float-position的关系"><a href="#_13、display-float-position的关系" class="header-anchor">#</a> 13、display,float,position的关系</h5> <ul><li>如果<code>display</code>为<code>none</code>，那么<code>position</code>和<code>float</code>都不起作用，这种情况下元素不产生框</li> <li>否则，如果<code>position</code>值为<code>absolute</code>或者<code>fixed</code>，框就是绝对定位的，<code>float</code>的计算值为<code>none</code>，<code>display</code>根据下面的表格进行调整。</li> <li>否则，如果<code>float</code>不是<code>none</code>，框是浮动的，<code>display</code>根据下表进行调整</li> <li>否则，如果元素是根元素，<code>display</code>根据下表进行调整</li> <li>其他情况下<code>display</code>的值为指定值</li> <li>总结起来：<strong>绝对定位、浮动、根元素都需要调整<code>display</code></strong></li></ul> <h5 id="_14、清除浮动的几种方式-各自的优缺点"><a href="#_14、清除浮动的几种方式-各自的优缺点" class="header-anchor">#</a> 14、清除浮动的几种方式，各自的优缺点</h5> <ul><li>使用空标签清除浮动<code>clear:both</code>（缺点，增加无意义的标签）</li> <li>使用<code>overflow:auto</code>（使用<code>zoom:1</code>用于兼容<code>IE</code>，缺点：内部宽高超过父级<code>div</code>时，会出现滚动条）</li> <li>用<code>afert</code>伪元素清除浮动(<code>IE8</code>以上和非<code>IE</code>浏览器才支持，目前：大型网站都有使用</li></ul> <h5 id="_15、css3有哪些新特性"><a href="#_15、css3有哪些新特性" class="header-anchor">#</a> 15、css3有哪些新特性</h5> <ul><li>新增各种<code>css</code>选择器</li> <li>圆角 <code>border-radius</code></li> <li>多列布局</li> <li>阴影和反射</li> <li>文字特效<code>text-shadow</code></li> <li>线性渐变</li> <li>旋转<code>transform</code></li></ul> <p><strong>CSS3新增伪类有那些？</strong></p> <ul><li><code>p:first-of-type</code> 选择属于其父元素的首个<code>元素的每个</code> 元素。</li> <li><code>p:last-of-type</code> 选择属于其父元素的最后 <code>元素的每个</code> 元素。</li> <li><code>p:only-of-type</code> 选择属于其父元素唯一的 <code>元素的每个</code> 元素。</li> <li><code>p:only-child</code> 选择属于其父元素的唯一子元素的每个 `` 元素。</li> <li><code>p:nth-child(2)</code> 选择属于其父元素的第二个子元素的每个 `` 元素。</li> <li><code>:after</code> 在元素之前添加内容,也可以用来做清除浮动。</li> <li><code>:before</code> 在元素之后添加内容</li> <li><code>:enabled</code></li> <li><code>:disabled</code> 控制表单控件的禁用状态。</li> <li><code>:checked</code> 单选框或复选框被选中</li></ul> <h5 id="_16、position的值-relative和absolute定位原点是"><a href="#_16、position的值-relative和absolute定位原点是" class="header-anchor">#</a> 16、position的值， relative和absolute定位原点是</h5> <ul><li><code>absolute</code>：生成绝对定位的元素，相对于 <code>static</code> 定位以外的第一个父元素进行定位</li> <li><code>fixed</code>：生成绝对定位的元素，相对于浏览器窗口进行定位</li> <li><code>relative</code>：生成相对定位的元素，相对于其正常位置进行定位</li> <li><code>static</code> 默认值。没有定位，元素出现在正常的流中</li> <li><code>inherit</code> 规定从父元素继承 <code>position</code> 属性的值</li></ul> <h5 id="_17、display-inline-block-什么时候不会显示间隙-携程"><a href="#_17、display-inline-block-什么时候不会显示间隙-携程" class="header-anchor">#</a> 17、display:inline-block 什么时候不会显示间隙？(携程)</h5> <ul><li>移除空格</li> <li>使用<code>margin</code>负值</li> <li>使用<code>font-size:0</code></li> <li><code>letter-spacing</code></li> <li><code>word-spacing</code></li></ul> <h5 id="_18、png-gif-jpg的区别及如何选"><a href="#_18、png-gif-jpg的区别及如何选" class="header-anchor">#</a> 18、PNG,GIF,JPG的区别及如何选</h5> <ul><li><p><code>GIF</code></p> <ul><li><code>8</code>位像素，<code>256</code>色</li> <li>无损压缩</li> <li>支持简单动画</li> <li>支持<code>boolean</code>透明</li> <li>适合简单动画</li></ul></li> <li><p><code>JPEG</code></p> <ul><li>颜色限于<code>256</code></li> <li>有损压缩</li> <li>可控制压缩质量</li> <li>不支持透明</li> <li>适合照片</li></ul></li> <li><div class="language- extra-class"><pre class="language-text"><code>PNG
</code></pre></div><ul><li>有<code>PNG8</code>和<code>truecolor PNG</code></li> <li><code>PNG8</code>类似<code>GIF</code>颜色上限为<code>256</code>，文件小，支持<code>alpha</code>透明度，无动画</li> <li>适合图标、背景、按钮</li></ul></li></ul> <h3 id="javascript"><a href="#javascript" class="header-anchor">#</a> JavaScript</h3> <h5 id="_1、闭包"><a href="#_1、闭包" class="header-anchor">#</a> 1、闭包</h5> <ul><li>闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域</li> <li>闭包的特性：
<ul><li>函数内再嵌套函数</li> <li>内部函数可以引用外层的参数和变量</li> <li>参数和变量不会被垃圾回收机制回收</li></ul></li></ul> <p><strong>说说你对闭包的理解</strong></p> <ul><li>使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念</li></ul> <h5 id="_2、javascript原型-原型链-有什么特点"><a href="#_2、javascript原型-原型链-有什么特点" class="header-anchor">#</a> 2、JavaScript原型，原型链 ? 有什么特点？</h5> <ul><li>每个对象都会在其内部初始化一个属性，就是<code>prototype</code>(原型)，当我们访问一个对象的属性时</li> <li>如果这个对象内部不存在这个属性，那么他就会去<code>prototype</code>里找这个属性，这<code>个prototype</code>又会有自己的<code>prototype</code>，于是就这样一直找下去，也就是我们平时所说的原型链的概念</li> <li>关系：<code>instance.constructor.prototype = instance.__proto__</code></li> <li>特点：
<ul><li><code>JavaScript</code>对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变</li></ul></li> <li>当我们需要一个属性的时，<code>Javascript</code>引擎会先看当前对象中是否有这个属性， 如果没有的</li> <li>就会查找他的<code>Prototype</code>对象是否有这个属性，如此递推下去，一直检索到 <code>Object</code> 内建对象</li></ul> <h5 id="_3、请解释什么是事件代理"><a href="#_3、请解释什么是事件代理" class="header-anchor">#</a> 3、请解释什么是事件代理</h5> <ul><li>事件代理（<code>Event Delegation</code>），又称之为事件委托。是 <code>JavaScript</code> 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能</li> <li>可以大量节省内存占用，减少事件注册，比如在<code>table</code>上代理所有<code>td</code>的<code>click</code>事件就非常棒</li> <li>可以实现当新增子对象时无需再次对其绑定</li></ul> <h5 id="_4、javascript如何实现继承"><a href="#_4、javascript如何实现继承" class="header-anchor">#</a> 4、Javascript如何实现继承？</h5> <ul><li>构造继承</li> <li>原型继承</li> <li>实例继承</li> <li>拷贝继承</li> <li>原型<code>prototype</code>机制或<code>apply</code>和<code>call</code>方法去实现较简单，建议使用构造函数与原型混合方式</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code> <span class="token keyword">function</span> <span class="token function">Parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'wang'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">function</span> <span class="token function">Child</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">28</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token class-name">Child</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//继承了Parent，通过原型</span>

    <span class="token keyword">var</span> demo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Child</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">alert</span><span class="token punctuation">(</span>demo<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">alert</span><span class="token punctuation">(</span>demo<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//得到被继承的属性</span>
  <span class="token punctuation">}</span>
</code></pre></div><h5 id="_5、谈谈this对象的理解"><a href="#_5、谈谈this对象的理解" class="header-anchor">#</a> 5、谈谈This对象的理解</h5> <ul><li><code>this</code>总是指向函数的直接调用者（而非间接调用者）</li> <li>如果有<code>new</code>关键字，<code>this</code>指向<code>new</code>出来的那个对象</li> <li>在事件中，<code>this</code>指向触发这个事件的对象，特殊的是，<code>IE</code>中的<code>attachEvent</code>中的<code>this</code>总是指向全局对象<code>Window</code></li></ul> <h5 id="_6、new操作符具体干了什么呢"><a href="#_6、new操作符具体干了什么呢" class="header-anchor">#</a> 6、new操作符具体干了什么呢?</h5> <ul><li>创建一个空对象，并且 <code>this</code> 变量引用该对象，同时还继承了该函数的原型</li> <li>属性和方法被加入到 <code>this</code> 引用的对象中</li> <li>新创建的对象由 <code>this</code> 所引用，并且最后隐式的返回 <code>this</code></li></ul> <h5 id="_7、ajax原理"><a href="#_7、ajax原理" class="header-anchor">#</a> 7、Ajax原理</h5> <ul><li><code>Ajax</code>的原理简单来说是在用户和服务器之间加了—个中间层(<code>AJAX</code>引擎)，通过<code>XmlHttpRequest</code>对象来向服务器发异步请求，从服务器获得数据，然后用<code>javascrip</code>t来操作<code>DOM</code>而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据</li> <li><code>Ajax</code>的过程只涉及<code>JavaScript</code>、<code>XMLHttpRequest</code>和<code>DOM</code>。<code>XMLHttpRequest</code>是<code>aja</code>x的核心机制</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code> <span class="token comment">// 1. 创建连接</span>
    <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 2. 连接服务器</span>
    xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
    <span class="token comment">// 3. 发送请求</span>
    xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 4. 接受请求</span>
    xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token function">success</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// fail</span>
                fail <span class="token operator">&amp;&amp;</span> <span class="token function">fail</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre></div><h5 id="_8、如何解决跨域问题"><a href="#_8、如何解决跨域问题" class="header-anchor">#</a> 8、如何解决跨域问题?</h5> <ul><li><code>jsonp</code>、 <code>iframe</code>、<code>window.name</code>、<code>window.postMessage</code>、服务器上设置代理页面</li></ul> <h5 id="_9、异步加载js的方式有哪些"><a href="#_9、异步加载js的方式有哪些" class="header-anchor">#</a> 9、异步加载JS的方式有哪些？</h5> <ul><li>defer，只支持<code>IE</code></li> <li><code>async</code>：</li> <li>创建<code>script</code>，插入到<code>DOM</code>中，加载完毕后<code>callBack</code></li></ul> <h5 id="_10、那些操作会造成内存泄漏"><a href="#_10、那些操作会造成内存泄漏" class="header-anchor">#</a> 10、那些操作会造成内存泄漏？</h5> <ul><li><p>内存泄漏指任何对象在您不再拥有或需要它之后仍然存在</p></li> <li><p><code>setTimeout</code> 的第一个参数使用字符串而非函数的话，会引发内存泄漏</p></li> <li><p>闭包使用不当</p> <h5 id="_11、xml和json的区别"><a href="#_11、xml和json的区别" class="header-anchor">#</a> 11、XML和JSON的区别？</h5></li> <li><p>数据体积方面</p> <ul><li><code>JSON</code>相对<code>于XML</code>来讲，数据的体积小，传递的速度更快些。</li></ul></li> <li><p>数据交互方面</p> <ul><li><code>JSON</code>与<code>JavaScript</code>的交互更加方便，更容易解析处理，更好的数据交互</li></ul></li> <li><p>数据描述方面</p> <ul><li><code>JSON</code>对数据的描述性比<code>XML</code>较差</li></ul></li> <li><p>传输速度方面</p> <ul><li><code>JSON</code>的速度要远远快于<code>XML</code></li></ul></li></ul> <h5 id="_12、谈谈你对webpack的看法"><a href="#_12、谈谈你对webpack的看法" class="header-anchor">#</a> 12、谈谈你对webpack的看法</h5> <ul><li><code>WebPack</code> 是一个模块打包工具，你可以使用<code>WebPack</code>管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包<code>Web</code>开发中所用到的<code>HTML</code>、<code>Javascript</code>、<code>CSS</code>以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，<code>webpack</code>有对应的模块加载器。<code>webpack</code>模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源</li></ul> <h5 id="_13、常见web安全及防护原理"><a href="#_13、常见web安全及防护原理" class="header-anchor">#</a> 13、常见web安全及防护原理</h5> <ul><li><code>sql</code>注入原理
<ul><li>就是通过把<code>SQL</code>命令插入到<code>Web</code>表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令</li></ul></li> <li>总的来说有以下几点
<ul><li>永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双<code>&quot;-&quot;</code>进行转换等</li> <li>永远不要使用动态拼装SQL，可以使用参数化的<code>SQL</code>或者直接使用存储过程进行数据查询存取</li> <li>永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接</li> <li>不要把机密信息明文存放，请加密或者<code>hash</code>掉密码和敏感的信息</li></ul></li></ul> <p><strong>XSS原理及防范</strong></p> <ul><li><code>Xss(cross-site scripting)</code>攻击指的是攻击者往<code>Web</code>页面里插入恶意<code>html</code>标签或者<code>javascript</code>代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取<code>cookie</code>中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点</li></ul> <p><strong>XSS防范方法</strong></p> <ul><li>首先代码里对用户输入的地方和变量都需要仔细检查长度和对<code>”&lt;”,”&gt;”,”;”,”’”</code>等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把<code>html tag</code> 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击</li></ul> <p><strong>XSS与CSRF有什么区别吗？</strong></p> <ul><li><code>XSS</code>是获取信息，不需要提前知道其他用户页面的代码和数据包。<code>CSRF</code>是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次<code>CSRF</code>攻击，受害者必须依次完成两个步骤</li> <li>登录受信任网站<code>A</code>，并在本地生成<code>Cookie</code></li> <li>在不登出<code>A</code>的情况下，访问危险网站<code>B</code></li></ul> <p><strong>CSRF的防御</strong></p> <ul><li>服务端的<code>CSRF</code>方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数</li> <li>通过验证码的方法</li></ul> <h5 id="_14、说说你对promise的了解"><a href="#_14、说说你对promise的了解" class="header-anchor">#</a> 14、说说你对promise的了解</h5> <ul><li>依照 <code>Promise/A+</code> 的定义，<code>Promise</code> 有四种状态：
<ul><li><code>pending:</code> 初始状态, 非 <code>fulfilled</code> 或 <code>rejected.</code></li> <li><code>fulfilled:</code> 成功的操作.</li> <li><code>rejected:</code> 失败的操作.</li> <li><code>settled: Promise</code>已被<code>fulfilled</code>或<code>rejected</code>，且不是<code>pending</code></li></ul></li> <li>另外， <code>fulfilled</code>与 <code>rejected</code>一起合称 <code>settled</code></li> <li><code>Promise</code> 对象用来进行延迟(<code>deferred</code>) 和异步(<code>asynchronous</code>) 计算</li></ul> <p><strong>Promise 的构造函数</strong></p> <ul><li>构造一个 <code>Promise</code>，最基本的用法如下：</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// succeed</span>

            <span class="token function">resolve</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>   <span class="token comment">// fails</span>

            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token function">Error</span><span class="token punctuation">(</span>errMessage<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p><code>Promise</code> 实例拥有 <code>then</code> 方法（具有 <code>then</code> 方法的对象，通常被称为<code>thenable</code>）。它的使用方法如下：</p> <div class="language- extra-class"><pre class="language-text"><code>promise.then(onFulfilled, onRejected)
</code></pre></div></li> <li><p>接收两个函数作为参数，一个在 <code>fulfilled</code> 的时候被调用，一个在<code>rejected</code>的时候被调用，接收参数就是 <code>future</code>，<code>onFulfilled</code> 对应<code>resolve</code>, <code>onRejected</code>对应 <code>reject</code></p></li></ul> <h5 id="_15、node的应用场景"><a href="#_15、node的应用场景" class="header-anchor">#</a> 15、Node的应用场景</h5> <ul><li>特点：
<ul><li>1、它是一个<code>Javascript</code>运行环境</li> <li>2、依赖于<code>Chrome V8</code>引擎进行代码解释</li> <li>3、事件驱动</li> <li>4、非阻塞<code>I/O</code></li> <li>5、单进程，单线程</li></ul></li> <li>优点：
<ul><li>高并发（最重要的优点）</li></ul></li> <li>缺点：
<ul><li>1、只支持单<code>核CPU</code>，不能充分利用<code>CPU</code></li> <li>2、可靠性低，一旦代码某个环节崩溃，整个系统都崩溃</li></ul></li></ul> <h5 id="_16、介绍js的基本数据类型"><a href="#_16、介绍js的基本数据类型" class="header-anchor">#</a> 16、介绍js的基本数据类型</h5> <ul><li><code>Undefined</code>、<code>Null</code>、<code>Boolean</code>、<code>Number</code>、<code>String</code></li></ul> <h5 id="_17、介绍js有哪些内置对象"><a href="#_17、介绍js有哪些内置对象" class="header-anchor">#</a> 17、介绍js有哪些内置对象？</h5> <ul><li><code>Object</code> 是 <code>JavaScript</code> 中所有对象的父对象</li> <li>数据封装类对象：<code>Object</code>、<code>Array</code>、<code>Boolean</code>、<code>Number</code> 和 <code>String</code></li> <li>其他对象：<code>Function</code>、<code>Arguments</code>、<code>Math</code>、<code>Date</code>、<code>RegExp</code>、<code>Error</code></li></ul> <h5 id="_18、说几条写javascript的基本规范"><a href="#_18、说几条写javascript的基本规范" class="header-anchor">#</a> 18、说几条写JavaScript的基本规范？</h5> <ul><li>不要在同一行声明多个变量</li> <li>请使用<code>===/!==</code>来比较<code>true/false</code>或者数值</li> <li>使用对象字面量替代<code>new Array</code>这种形式</li> <li>不要使用全局函数</li> <li><code>Switch</code>语句必须带有<code>default</code>分支</li> <li><code>If</code>语句必须使用大括号</li> <li><code>for-in</code>循环中的变量 应该使用<code>var</code>关键字明确限定作用域，从而避免作用域污</li></ul> <h5 id="_19、eval是做什么的"><a href="#_19、eval是做什么的" class="header-anchor">#</a> 19、eval是做什么的？</h5> <ul><li>它的功能是把对应的字符串解析成<code>JS</code>代码并运行</li> <li>应该避免使用<code>eval</code>，不安全，非常耗性能（<code>2</code>次，一次解析成<code>js</code>语句，一次执行）</li> <li>由<code>JSON</code>字符串转换为JSON对象的时候可以用<code>eval，var obj =eval('('+ str +')')</code></li></ul> <h5 id="_20、null-undefined-的区别"><a href="#_20、null-undefined-的区别" class="header-anchor">#</a> 20、null，undefined 的区别？</h5> <ul><li><code>undefined</code> 表示不存在这个值。</li> <li><code>undefined</code> :是一个表示&quot;无&quot;的原始值或者说表示&quot;缺少值&quot;，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 <code>undefined</code></li> <li>例如变量被声明了，但没有赋值时，就等于<code>undefined</code></li> <li><code>null</code> 表示一个对象被定义了，值为“空值”</li> <li><code>null</code> : 是一个对象(空对象, 没有任何属性和方法)</li> <li>例如作为函数的参数，表示该函数的参数不是对象；</li> <li>在验证<code>null</code>时，一定要使用　<code>===</code> ，因为 <code>==</code>无法分别<code>null</code> 和　<code>undefined</code></li></ul> <h5 id="_21、js延迟加载的方式有哪些"><a href="#_21、js延迟加载的方式有哪些" class="header-anchor">#</a> 21、js延迟加载的方式有哪些？</h5> <ul><li><code>defer</code>和<code>async</code>、动态创建<code>DOM</code>方式（用得最多）、按需异步载入<code>js</code></li></ul> <h5 id="_22、同步和异步的区别"><a href="#_22、同步和异步的区别" class="header-anchor">#</a> 22、同步和异步的区别?</h5> <ul><li>同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作</li> <li>异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容</li></ul> <h5 id="_23、渐进增强和优雅降级"><a href="#_23、渐进增强和优雅降级" class="header-anchor">#</a> 23、渐进增强和优雅降级</h5> <ul><li>渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</li> <li>优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容</li></ul> <h5 id="_24、defer和async"><a href="#_24、defer和async" class="header-anchor">#</a> 24、defer和async</h5> <ul><li><code>defer</code>并行加载<code>js</code>文件，会按照页面上<code>script</code>标签的顺序执行</li> <li><code>async</code>并行加载<code>js</code>文件，下载完成立即执行，不会按照页面上<code>script</code>标签的顺序执行</li></ul> <h5 id="_25、说说严格模式的限制"><a href="#_25、说说严格模式的限制" class="header-anchor">#</a> 25、说说严格模式的限制</h5> <ul><li>变量必须声明后再使用</li> <li>函数的参数不能有同名属性，否则报错</li> <li>不能使用<code>with</code>语句</li> <li>禁止<code>this</code>指向全局对象</li></ul> <h3 id="编程题"><a href="#编程题" class="header-anchor">#</a> 编程题</h3> <h5 id="_1、写一个通用的事件侦听器函数"><a href="#_1、写一个通用的事件侦听器函数" class="header-anchor">#</a> 1、写一个通用的事件侦听器函数</h5> <div class="language-javascript extra-class"><pre class="language-javascript"><code>      markyun<span class="token punctuation">.</span>Event <span class="token operator">=</span> <span class="token punctuation">{</span>

        <span class="token comment">// 视能力分别使用dom0||dom2||IE方式 来绑定事件</span>
        <span class="token comment">// 参数： 操作的元素,事件名称 ,事件处理程序</span>
        <span class="token function-variable function">addEvent</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> type<span class="token punctuation">,</span> handler</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">//事件类型、需要执行的函数、是否捕捉</span>
                element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>attachEvent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                element<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'on'</span> <span class="token operator">+</span> type<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token function">handler</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                element<span class="token punctuation">[</span><span class="token string">'on'</span> <span class="token operator">+</span> type<span class="token punctuation">]</span> <span class="token operator">=</span> handler<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 移除事件</span>
        <span class="token function-variable function">removeEvent</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> type<span class="token punctuation">,</span> handler</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>removeEventListener<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                element<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>datachEvent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                element<span class="token punctuation">.</span><span class="token function">detachEvent</span><span class="token punctuation">(</span><span class="token string">'on'</span> <span class="token operator">+</span> type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                element<span class="token punctuation">[</span><span class="token string">'on'</span> <span class="token operator">+</span> type<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)</span>
        <span class="token function-variable function">stopPropagation</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>stopPropagation<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                ev<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                ev<span class="token punctuation">.</span>cancelBubble <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 取消事件的默认行为</span>
        <span class="token function-variable function">preventDefault</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>preventDefault<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                event<span class="token punctuation">.</span>returnValue <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 获取事件目标</span>
        <span class="token function-variable function">getTarget</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> event<span class="token punctuation">.</span>target <span class="token operator">||</span> event<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
</code></pre></div><h5 id="_2、如何判断一个对象是否为数组"><a href="#_2、如何判断一个对象是否为数组" class="header-anchor">#</a> 2、如何判断一个对象是否为数组</h5> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">isArray</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> arg <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arg<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Array]'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h5 id="_3、冒泡排序"><a href="#_3、冒泡排序" class="header-anchor">#</a> 3、冒泡排序</h5> <ul><li>每次比较相邻的两个数，如果后一个比前一个小，换位置</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">bubbleSort</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">&lt;</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> temp<span class="token punctuation">;</span>
            temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
            arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            arr<span class="token punctuation">[</span>j <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> arr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">bubbleSort</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_4、快速排序"><a href="#_4、快速排序" class="header-anchor">#</a> 4、快速排序</h5> <ul><li>采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">quickSort</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>    <span class="token comment">// 返回空数组</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">var</span> cIndex <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> c <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>cIndex<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> l <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> r <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">&lt;</span> c<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            l<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            r<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token function">quickSort</span><span class="token punctuation">(</span>l<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>c<span class="token punctuation">,</span> <span class="token function">quickSort</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">quickSort</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_5、编写一个方法-求一个字符串的字节长度"><a href="#_5、编写一个方法-求一个字符串的字节长度" class="header-anchor">#</a> 5、编写一个方法 求一个字符串的字节长度</h5> <ul><li>假设：一个英文字符占用一个字节，一个中文字符占用两个字节</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">GetBytes</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

        <span class="token keyword">var</span> len <span class="token operator">=</span> str<span class="token punctuation">.</span>length<span class="token punctuation">;</span>

        <span class="token keyword">var</span> bytes <span class="token operator">=</span> len<span class="token punctuation">;</span>

        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

            <span class="token keyword">if</span> <span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">255</span><span class="token punctuation">)</span> bytes<span class="token operator">++</span><span class="token punctuation">;</span>

        <span class="token punctuation">}</span>

        <span class="token keyword">return</span> bytes<span class="token punctuation">;</span>

    <span class="token punctuation">}</span>

<span class="token function">alert</span><span class="token punctuation">(</span><span class="token function">GetBytes</span><span class="token punctuation">(</span><span class="token string">&quot;你好,as&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="开放题目"><a href="#开放题目" class="header-anchor">#</a> 开放题目</h3> <h5 id="_1、谈谈你对重构的理解"><a href="#_1、谈谈你对重构的理解" class="header-anchor">#</a> 1、谈谈你对重构的理解</h5> <ul><li>网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化， 在扩展的同时保持一致的UI</li> <li>对于传统的网站来说重构通常是：
<ul><li>表格(<code>table</code>)布局改为<code>DIV+CSS</code></li> <li>使网站前端兼容于现代浏览器(针对于不合规范的<code>CSS</code>、如对IE6有效的)</li> <li>对于移动平台的优化</li> <li>针对于<code>SEO</code>进行优化</li></ul></li></ul> <h5 id="_2、什么样的前端代码是好的"><a href="#_2、什么样的前端代码是好的" class="header-anchor">#</a> 2、什么样的前端代码是好的</h5> <ul><li>高复用低耦合，这样文件小，好维护，而且好扩展。</li></ul> <h5 id="_3、对前端工程师这个职位是怎么样理解的-它的前景会怎么样"><a href="#_3、对前端工程师这个职位是怎么样理解的-它的前景会怎么样" class="header-anchor">#</a> 3、对前端工程师这个职位是怎么样理解的？它的前景会怎么样？</h5> <ul><li><p>前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近</p> <ul><li>实现界面交互</li> <li>提升用户体验</li> <li>有了Node.js，前端可以实现服务端的一些事情</li></ul></li> <li><p>前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，</p></li> <li><p>与团队成员，<code>UI</code>设计，产品经理的沟通；</p></li> <li><p>做好的页面结构，页面重构和用户体验；</p></li></ul> <h5 id="_4、你觉得前端工程的价值体现在哪"><a href="#_4、你觉得前端工程的价值体现在哪" class="header-anchor">#</a> 4、你觉得前端工程的价值体现在哪</h5> <ul><li>为简化用户使用提供技术支持（交互部分）</li> <li>为多个浏览器兼容性提供支持</li> <li>为提高用户浏览速度（浏览器性能）提供支持</li> <li>为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持</li> <li>为展示数据提供支持（数据接口）</li></ul> <h5 id="_5、平时如何管理你的项目"><a href="#_5、平时如何管理你的项目" class="header-anchor">#</a> 5、平时如何管理你的项目？</h5> <ul><li>先期团队必须确定好全局样式（<code>globe.css</code>），编码模式(<code>utf-8</code>) 等；</li> <li>编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；</li> <li>标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；</li> <li>页面进行标注（例如 页面 模块 开始和结束）；</li> <li><code>CSS</code>跟<code>HTML</code> 分文件夹并行存放，命名都得统一（例如<code>style.css</code>）；</li> <li><code>JS</code> 分文件夹存放 命名以该<code>JS</code>功能为准的英文翻译。</li> <li>图片采用整合的 <code>images.png png8</code> 格式文件使用 - 尽量整合在一起使用方便将来的管理</li></ul> <h2 id="非技术面试"><a href="#非技术面试" class="header-anchor">#</a> 非技术面试</h2> <h5 id="_1-你的爱好是什么"><a href="#_1-你的爱好是什么" class="header-anchor">#</a> 1.你的爱好是什么？</h5> <p>重点：别给我说什么爱好睡觉之类的，你要说一些正经的爱好，比如篮球，足球，各种球，如果你非要说打游戏的话，切记最多说竞技游戏，策略游戏，桌游，别说网游。</p> <h5 id="_2-你最大的优点和缺点是什么"><a href="#_2-你最大的优点和缺点是什么" class="header-anchor">#</a> 2.你最大的优点和缺点是什么？</h5> <p><code>优点</code>：说你自己的优点，比如什么善良，诚实之类的。</p> <p><code>缺点</code>：不要去查百度，如果你去了就会发现百度上的答案是让你说一个所谓的“缺点”，然后绕了一大圈之后回来，其实是变相的夸你是自己，纯粹放屁，说些无关痛痒的，别给我搞出来什么没有时间观念，不诚信啥的，这很致命。</p> <h5 id="_3-你未来三到五年的职业规划是什么"><a href="#_3-你未来三到五年的职业规划是什么" class="header-anchor">#</a> 3.你未来三到五年的职业规划是什么？</h5> <p>这里有一点要提一下，不是说你一定非要说自己的职业规划就是架构师，全栈工程师，有些女同学她的职业规划就是干两年技术之后转成一个懂得技术的产品经理，这样也是可以的，你如果有相应的规划，合理的理由，都是可以的，但是你不要搞出来想做的那个职业和互联网毫无关系的。</p> <p>如果你还没有职业规划，也觉得说5年之后很不真实，你也可以说最近你一年的计划，比如说你今年准备吧react吃透等等。</p> <h5 id="_4-你对工资有什么要求"><a href="#_4-你对工资有什么要求" class="header-anchor">#</a> 4.你对工资有什么要求？</h5> <p>别说什么没要求，你心里怎么想的就怎么去说，尽量去说准确的值，别搞出7~15k，你这个范围实在是太大了，切记。</p> <h5 id="_5-你是怎么学习前端开发的"><a href="#_5-你是怎么学习前端开发的" class="header-anchor">#</a> 5.你是怎么学习前端开发的？</h5> <p>你可以说是在网上买了视频之类的，哪怕你说是培训机构的视频都没事，你也可以说是慕课网上面学的，亲戚朋友有做这个的，实习学的，这都可以，别紧张。</p> <h5 id="_6-最近在看哪些前端的书籍或者博客"><a href="#_6-最近在看哪些前端的书籍或者博客" class="header-anchor">#</a> 6.最近在看哪些前端的书籍或者博客？</h5> <p>求你们，不要全班都是一样的阮一峰，在额外找几个，多说两个没事，哪怕不有名，只要你说就是对的，谁也没规定就一定是要固定死要看谁</p> <h5 id="_7-你的项目有什么亮点"><a href="#_7-你的项目有什么亮点" class="header-anchor">#</a> 7.你的项目有什么亮点？</h5> <p>你别直接说没亮点，你可以说用了什么技术有什么好处，怎么样提高了用户体验之类的。</p> <h5 id="_8-你在工作过遇到哪些让你印象深刻的bug"><a href="#_8-你在工作过遇到哪些让你印象深刻的bug" class="header-anchor">#</a> 8.你在工作过遇到哪些让你印象深刻的bug？</h5> <p>提前准备好几个，也可以说一些你在敲面面，头条时候遇到的问题，别说什么单词写错的这种。</p> <h5 id="_9-你是如何看待前端开发的"><a href="#_9-你是如何看待前端开发的" class="header-anchor">#</a> 9.你是如何看待前端开发的？</h5> <p>你可别说什么就是写页面的，给我往高大上了说，比如你可以说我们可以把产品经理的想法，UI的设计完美的展现给客户，让用户有更好的体验，我们就像是链接用户与开发的桥梁一样。</p> <h5 id="_10-你为什么会选择前端这个职位"><a href="#_10-你为什么会选择前端这个职位" class="header-anchor">#</a> 10.你为什么会选择前端这个职位？</h5> <h5 id="_11-你有什么要问我的吗"><a href="#_11-你有什么要问我的吗" class="header-anchor">#</a> 11.你有什么要问我的吗？</h5></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/35.28502be1.js" defer></script>
  </body>
</html>
